<template>
  <div class="common-layout" style="height: 100%; width: 100%;">
    <el-container>
      <el-container>
        <el-aside width="200px" >
          <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
            <el-radio-button :label="false">展开</el-radio-button>
            <el-radio-button :label="true">折叠</el-radio-button>
          </el-radio-group>
          <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              :collapse="isCollapse"
              @open="handleOpen"
              @close="handleClose"
          >
            <el-sub-menu index="1">
              <template #title>
                <el-icon><location /></el-icon>
                <span>公告管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1">查看公告</el-menu-item>
                <el-menu-item index="1-2">发布公告</el-menu-item>
              </el-menu-item-group>

            </el-sub-menu>
            <el-menu-item index="2">
              <el-icon><icon-menu /></el-icon>
              <template #title>用户管理</template>
            </el-menu-item>
            <el-menu-item index="3">
              <el-icon><document /></el-icon>
              <template #title>课程管理</template>
            </el-menu-item>
            <el-menu-item index="4">
              <el-icon><setting /></el-icon>
              <template #title>成绩管理</template>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <Outline></Outline>
        </el-main>
      </el-container>
    </el-container>
  </div>

</template>

<script lang="ts" setup>

import { ref } from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import Outline from '@/components/Outline.vue'

const isCollapse = ref(true)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>